<template>
    <div>
        <div class="border border-gray-500 my-2">
            <el-carousel
                height="150px"
                trigger="click"
                :interval="2000"
                pause-on-hover
            >
                <el-carousel-item v-for="item in 4" :key="item"
                >
                    <h3 class="my-8 text-6xl text-center text-gray-600">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="border border-gray-500 my-2">
            <el-carousel
                height="150px"
                trigger="click"
                indicator-position="outside"
                :autoplay="false"
            >
                <el-carousel-item
                    v-for="item in 4"
                    :key="item"
                >
                    <h3 class="my-8 text-6xl text-center text-gray-600">
                        {{ item }}
                    </h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="border border-gray-500 my-2">
            <el-carousel
                height="150px"
                trigger="click"
                arrow="always"
                :interval="3500"
            >
                <el-carousel-item v-for="item in 4" :key="item"
                >
                    <h3 class="my-8 text-6xl text-center text-gray-600">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="border border-gray-500 my-2">
            <el-carousel
                height="150px"
                trigger="click"
                type="card"
            >
                <el-carousel-item v-for="item in 6" :key="item"
                >
                    <h3 class="my-8 text-6xl text-center text-gray-600">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="border border-gray-500 my-2">
            <el-carousel
                height="150px"
                trigger="click"
                :interval="3800"
                direction="vertical"
            >
                <el-carousel-item v-for="item in 4" :key="item"
                >
                    <h3 class="my-12 text-6xl text-center text-gray-600">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="h-12"></div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, unref } from "vue";

export default defineComponent({
    name: "CompName",
    setup() {
        return {};
    },
});
</script>

<style scoped>
    .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
